<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		/* The switch - the box around the slider */
		.switch {
		  position: relative;
		  display: inline-block;
		  width: 60px;
		  height: 34px;
		}
		 
		/* Hide default HTML checkbox */
		.switch input {
		  opacity: 0;
		  width: 0;
		  height: 0;
		}
		 
		/* The slider */
		.slider {
		  position: absolute;
		  cursor: pointer;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  background-color: #ccc;
		  transition: .4s;
		}
		 
		.slider:before {
		  position: absolute;
		  content: "";
		  height: 26px;
		  width: 26px;
		  left: 4px;
		  bottom: 4px;
		  background-color: white;
		  transition: .4s;
		}
		 
		input:checked + .slider {
		  background-color: #2196F3;
		}
		 
		input:checked + .slider:before {
		  transform: translateX(26px);
		}
		 
		/* Rounded sliders */
		.slider.round {
		  border-radius: 34px;
		}
		 
		.slider.round:before {
		  border-radius: 50%;
		}
	</style>
	<body>
		<label class="switch">
		  <input type="checkbox" id="slider" />
		  <span class="slider round"></span>
		</label>
	</body>
</html>